<template>
	<view class="my-search flex justify-between align-center" :class="isShowBorder?'bor':''">
		<u-search 
			:placeholder="placeholder" 
			v-model="value" 
			shape="shuare"
			bg-color="#fff"
			:show-action="false"
			@search="onEmit"
			@clear="onClear"
			class="w-100"
		/>
		<view class="shrink0">
			<u-icon
				v-if="iconScan"
				class="mr-20" 
				name="scan" 
				color="#2B6FD5" 
				size="28" 
				@click="onScan"
			/>
			<u-icon 
				v-if="iconScreen"
				class="mr-20" 
				name="share-square" 
				color="#2B6FD5" 
				size="28" 
				@click="onChange('screen')"
			/>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			// 提示语
			placeholder:{
				type: String,
				default: '请输入'
			},
			iconScreen: {
				type: Boolean,
				default: false,
			},
			iconScan: {
				type: Boolean,
				default: false,
			},
			isShowBorder:{// 是否显示边框
				type: Boolean,
				default: false,
			}
		},
		data(){
			return {
				value:''
			}
		},
		methods: {
			onScan(){
				let that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						that.value = res.result
						that.$emit("setval", res.result)
					},
					fail: (res)=>{
						if(res.errMsg ==='scanCode:fail cancel'){
							that.$refs.uToast.show({message: '取消扫码'})
						}else {
							that.$refs.uToast.show({
								message: '扫码出现错误，请重新打开',
								icon: false,
								type: 'error'
							})
						}
					}
				});
			},
			onClear(){
				this.$emit("setval", '')
			},
			onEmit(val){
				this.$emit("setval", val)
			},
			onChange(val){
				this.$emit("awaken", val)
			}
		}
	}
</script>

<style lang="scss">
	.my-search{
		width: 710upx;
		margin: 20upx auto;
		background-color:$uni-bg-color;
		border-radius:10upx;
	}
	.bor{
		border: 1px $uni-border-color solid;
	}
</style>